<template>
  <div class="bottom-controls">
    <div class="button-group">
      <img src="@/assets/svg/save.svg" class="btn-icon" alt="SVG Icon" />
      <img src="@/assets/svg/upSystem.svg" class="btn-icon" alt="SVG Icon" />
      <img
        src="@/assets/svg/saveBtn.svg"
        class="btn-icon"
        style="height: 68px"
        alt="SVG Icon"
      />
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.bottom-controls {
  padding: 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  /* 添加以下样式实现内容垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px; /* 设置最小高度以确保有足够的垂直空间 */
}

.btn-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 24px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
  position: relative;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center; /* 垂直居中 */
}

.btn-icon {
  width: 100px;
  height: 58px;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.btn-icon:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.4));
}
</style>